<template>
  <div class='my-state'>
    <div class="my-state-top">
      <p>
        {{ usermes['nickname'] }}的空间
      </p>
    </div>
    <div class="my-state-bottom">
      <div class="d1">
        <img :src="usermes['avatar']" alt="">
        <div class="d1-a">
          <a class="link-bj"> 编辑资料 </a>
        </div>
      </div>
      <div class="d2">
        <div>
          {{ usermes['nickname'] }}
        </div>
      </div>
      <div class="d3">
        <ul class="d3-ul">
          <li class="li">
            <div>
              <div class="num">{{ userMsg.visitedNums }}</div>
              <div class="text">被访问数</div>
            </div>
          </li>
          <li class="li" style="cursor: pointer;"  @click="pathrouter('blog')">
            <div>
              <div class="num"> {{ userMsg.myBlogNums }} </div>
              <div class="text">原创文章</div>
            </div>
          </li>
          <li class="li" style="cursor: pointer;" @click="pathrouter('blog')">
            <div>
              <div class="num"> {{ likedBlogsRef }} </div>
              <div class="text">点赞文章</div>
            </div>
          </li>
          <li class="li li4" style="cursor: pointer;" @click="pathrouter('fans')">
            <div>
              <div class="num"> {{ userMsg.followNums }} </div>
              <div class="text">粉丝数</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getStateAPI, getUserByIdAPI } from '../../api/userAPI'
import { error1 } from '../../tool/ElMessageAny'
import { Iloginmsg } from '../../views/login/esType'
import {
  IblogList
} from '../../components/my-blog/exType'

// 接口
export interface IuserMsg {
  username: string;
  fangwen: number;
  yuanchuang: number;
  dianzan: number;
  fans: number;
  
}
export default defineComponent({
  name: '',
  props: {
    userID: Number
  },
  setup (props: any) {
    // 获取父亲的传值
    const userid = props.userID
    // 获取router
    const $router = useRouter()
    // 跳转路由
    const pathrouter = (routerName: string) => {
      $router.push({
        name: 'my',
        query: {
          userID: props.userID,
          type: routerName
        }
      })
    }
    const usermes = ref<Iloginmsg>({
      username: '',
      password: ''
    })
    const getusermes = async () => {
      try {
        const res = await getUserByIdAPI(userid)
        if(res.data.code === 200) {
          usermes.value = res.data.data 
        }
        
      } catch {
        error1('服务器异常,获取用户信息失败')
      }
    }
    // 获取state数据
    // 用户的总数信息
    const userMsg = ref<IblogList>({})
    // 点赞总数
    const likedBlogsRef = ref<any>(5)
    const getStateNumber = async () => {
      const res = await getStateAPI(userid)
      userMsg.value = res.data.data
      likedBlogsRef.value = res.data.data.likedBlogs.length
    }


    onMounted(() => {
      getusermes()
      getStateNumber()
    })
    return {
      userMsg,
      pathrouter,
      usermes,
      likedBlogsRef
    }
  }
})
</script>

<style lang='scss' scoped>
.my-state{
  background-color: #fff;
}


.my-state-top{
  height: 100px;
  background-image: url('http://www.yswdqz.xyz/wallhaven-72pqze.jpg');
  background-position-y: -153px;
  background-size: cover;
  padding-top: 16px;
  p{
    padding-left: 24px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    color: #fff;
    
  }
}

.my-state-bottom{
  height: 204px;
  padding: 24px 24px 24px;


  .d1{
    height: 50px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    img{
      position: absolute;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      width: 96px;
      height: 96px;
      border: 4px solid #fff;
      border-radius: 50%;
      box-shadow: 0px 0px 4px 0px rgb(221, 221, 221);
    }
    .d1-a{
      .link-bj{
        background: #fc5531;
        color: #fff;
        border: none;
        padding: 7px 20px;
        border-radius: 30px;
      }
      .link-bj:hover{
        background-color: #d44829;
      }
    }
    
  }

  .d2{
    text-align: center;
    height: 50px;
    div{
      color: #222226;
      font-size: 22px;
      font-weight: 500;
      line-height: 24px;
    }
  }

  .d3{
    .d3-ul{
      display: flex;
      justify-content: center;
      text-align: center;
      .li{
        
        padding: 0px 40px;
        border-right: 1px solid rgb(219, 219, 219);
        .num{
          color: #222226;
          font-family: DINCond-Black;
          font-size: 24px;
          line-height: 24px;
          margin-bottom: 16px;
          font-weight: 800;
        }
        .text{
          color: #999aaa;
          font-size: 14px;
          line-height: 16px;
        }
      }
      .li4{
        border: 0 !important;
      }
    }
  }
}
</style>
